import React, { PureComponent } from 'react'

import { CSSTransition } from 'react-transition-group'

import './CSSTransition.css'

import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons'
import { Avatar, Card } from 'antd'

const { Meta } = Card

export default class CSSTransitionCpn extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      show: true,
    }
    // this.handleClick = this.handleClick.bind(this)
  }

  handleClick(){
    this.setState({
      show:!this.state.show,
    })
  }

  render() {
    const { show } = this.state
    return (
      <div className="container">
        {/* <button onClick={this.handleClick}>显示/隐藏</button> */}
        <button className='btn' onClick={(e) => this.handleClick(e)}>显示/隐藏</button>
        {/* in 决定包裹的内容显示域隐藏 */}
        {/* timeout 动画持续时间   与样式文件中的transition: all 300ms;不同  控制类添加的时间*/}
        {/* unmountOnExit  是否隐藏时卸载节点 */}
        {/* appear  第一次出现时的动画 */}
        {/* 生命周期 onEnter   onEntering onEntered  onExit  onExiting  onExited */}
        <CSSTransition in={show}  timeout={300}  classNames="card"  unmountOnExit={true}  appear 
                      onEnter={el => console.log('进入状态')}
                      onEntering={el => console.log('正在进入')}
                      onEntered={el => console.log('进入完成')}
                      onExit={el => console.log('退出状态')}
                      onExiting={el => console.log('正在退出')}
                      onExited={el => console.log('退出完成')}
        >
          <Card
            style={{
              width: 300,
            }}
            cover={
              <img
                alt="example"
                src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
              />
            }
            actions={[
              <SettingOutlined key="setting" />,
              <EditOutlined key="edit" />,
              <EllipsisOutlined key="ellipsis" />,
            ]}
          >
            <Meta
              avatar={<Avatar src="https://picsum.photos/200/300" />}
              title="Card title"
              description="This is the description"
            />
          </Card>
        </CSSTransition>
      </div>
    )
  }
}
